import React, { Component } from 'react'
import { Link } from 'react-router-dom'

import { withStyles } from 'material-ui/styles'
import Card, { CardContent, CardMedia } from 'material-ui/Card'
import Grid from 'material-ui/Grid'
import Typography from 'material-ui/Typography'

import ai from '../../assets/teck/ai.jpeg'
import java from '../../assets/teck/java.jpeg'
import bigdata from '../../assets/teck/bigdata.png'
import python from '../../assets/teck/python.jpeg'
import vr from '../../assets/teck/vr.jpeg'
import blockchain from '../../assets/teck/blockchain.png'

const styles = theme => ({
  chip: {
    margin: theme.spacing.unit / 2,
  },
  row: {
    display: 'flex',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
    marginTop: 40,
    marginBottom: 15

  },
  link: {
    textDecoration: 'none'
  },
  media: {
    width: 50,
    height: 50,
    borderRadius: '10%',
    backgroundSize: 'contain'
  },
  hot: {
    boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.2)!important'
  },
  content: {
    width: 50,
    padding: '16px 0 0 0',
    textAlign: 'center'
  },
  contain: {
    justifyContent: 'space-between'
  },
  item: {
    flexBasis: 'unset'
  },
  '@media (max-width: 600px)': {
    media: {
      width: 60,
      height: 45,
    },
    content: {
      width: 60
    },
    item: {
      padding: '0!important'
    }
  },
})

const datas = [
      { key: 0, label: '大数据', logo: bigdata},
      { key: 3, label: 'Python', logo: python},
      { key: 2, label: '区块链', logo: blockchain},
      { key: 1, label: '人工智能', logo: ai},
      { key: 7, label: 'VR', logo: vr },
      { key: 5, label: 'Java', logo: java },
    ]
@withStyles(styles)
class PopTag extends Component {
	constructor(props) {
	  super(props)
	}

  async handleClick(data) {
    this.props.setOffset(0)
    this.props.setSearchKey(data.label)
    this.props.clearCourse()
    this.props.clearPagination()
    const res = await this.props.fetchCourse(data.label)
    this.props.setCourse(res.data.courses)
    this.props.setPagination(res.data)
    location.hash =`/course/${data.label}`
  }

	render() {
		const { classes } = this.props
    return (
      <div className={classes.row} >
        <Grid container spacing={16} className={classes.contain}>
          {datas.map(data => {
            return (
              <Grid item xs={4} lg={2} xl={2} key={data.label} className={classes.item}>
                <Link to={`/course/${data.label}`} key={data.label} className={classes.link}>
                  <Card className={classes.hot}>
                    <CardMedia
                      className={classes.media}
                      image={data.logo}
                      title={data.label}
                      onClick={(e) => this.handleClick(data)}
                    />
                    <CardContent className={classes.content}>
                      <Typography type="caption">
                        {data.label}
                      </Typography>
                    </CardContent>
                  </Card>
                </Link>
              </Grid>
            )
          })}
        </Grid>
      </div>
    )
	}
}

export default PopTag